<!DOCTYPE html>
<html>

<script>
var isFirstTime=true;

function preferedFigure(){
	
	prefer=document.forms[0].figures.value;
	
	if(prefer == "Circle"){
    	var settings = "Circle<br> Radius:<br> <input type=\"text\" name=\"circleRadius\"><br> Position:<br>X:<input type=\"text\" name=\"circlePositionX\">Y:<input type=\"text\" name=\"circlePositionY\"> <br><br>";		               
	}
	
	if(prefer == "Square"){
        var settings = "Square<br> Size:<br> <input type=\"text\" name=\"squareSize\"> <br> Position:<br>X:<input type=\"text\" name=\"squarePositionX\">Y:<input type=\"text\" name=\"squarePositionY\"><br><br>";
	}
	
	if(prefer == "Rectangle"){
        var settings = "Rectangle<br> Width:<br> <input type=\"text\" name=\"rectangleWidth\"><br> Height:<br> <input type=\"text\" name=\"rectangleHeight\"> <br> Position:<br>X:<input type=\"text\" name=\"rectanglePositionX\">Y:<input type=\"text\" name=\"rectanglePositionY\"> <br><br>";
	}
	
	if(prefer == "Dot"){
        var settings = "Dot<br>Position:<br>X:<input type=\"text\" name=\"dotPositionX\">Y:<input type=\"text\" name=\"dotPositionY\"> <br><br>";
	}
	
	 document.getElementById("settings").innerHTML = "<input style=\"visibility:hidden\" type=\"text\" name=\"figure\" value=\""+prefer+"\"><br>" + settings;
}
</script>

<body>


<form action="WebPrinter" method="get">

<!-- 
Set the Board Dimensions: <br>
Width: <input type="text" name="boardWidth">
Height: <input type="text" name="boardHeight"><br>
 -->

Choose which Figure you prefer to add:
<select id="figures" onchange="preferedFigure()">
<option selected="selected" >--</option>
<option value="Square">Square</option>
<option value="Dot">Dot</option>
<option value="Circle">Circle</option>
<option value="Rectangle">Rectangle</option>
</select>

<input type="submit" value="Create Board">
</form>

<form action="WebPrinter" method="post">
	<div id="settings"></div>
	<input type="submit" value="Add to Board">
</form>

</body>
</html>